<template>
   
  <div class="game-board flex flex-col h-screen bg-green-700 p-4">
    <!-- 返回主菜单按钮 -->
   <div class="mt-4 flex justify-center">
      <button @click="$emit('backToMenu')" class="bg-red-500 hover:bg-red-600 text-white px-6 py-2 rounded text-lg">
        返回主菜单
      </button>
    </div>
    <!-- 顶部 AI 玩家 -->
    <PlayerPanel name="AI 玩家 1" :card-count="aiTop.cards.length" :position="'top'" />

    <!-- 中部：左AI - 中心出牌区 - 玩家自己 -->
    <div class="flex-1 flex justify-between items-center my-4">
      <PlayerPanel name="AI 玩家 2" :card-count="aiLeft.cards.length" :position="'left'" />

      <div class="flex flex-col items-center justify-center">
        <div class="text-white text-xl mb-2">当前出牌：</div>
        <div class="played-cards text-white text-2xl font-bold">{{ currentPlayed.join(' ') }}</div>
        <div class="status text-yellow-300 mt-2">{{ currentStatus }}</div>
      </div>

      <PlayerPanel name="你" :card-count="self.cards.length" :position="'right'" />
    </div>

    <!-- 底部手牌与操作 -->
    <div class="bg-green-800 p-4 min-h-[160px] rounded-xl shadow-xl h-100">
      <ControlPanel @play="playCards" @hint="hintCards" @pass="passTurn" />
      <CardArea :cards="self.cards" v-model:selected="selectedCards" />
    </div>

   
  </div>
</template>

<script setup>
import { ref } from 'vue';
import PlayerPanel from './PlayerPanel.vue';
import CardArea from './CardArea.vue';
import ControlPanel from './ControlPanel.vue';

const aiTop = ref({ cards: Array(13).fill('🂠') });
const aiLeft = ref({ cards: Array(14).fill('🂠') });
const self = ref({ cards: ['3♠', '4♣', '5♥', '6♦', '7♠', '8♠', '9♣', '10♦', 'J♥', 'Q♠', 'K♣', 'A♥', '2♠', 'JOKER'] });
const selectedCards = ref([]);
const currentPlayed = ref([]);
const currentStatus = ref('等待出牌...');

function playCards() {
  currentPlayed.value = [...selectedCards.value];
  selectedCards.value = [];
  currentStatus.value = '你出牌了';
}
function hintCards() {
  selectedCards.value = [self.value.cards[0]];
}
function passTurn() {
  currentStatus.value = '你选择不出';
}
</script>

<style scoped>
.played-cards {
  min-height: 3rem;
  padding: 0.5rem;
}
</style>